<template>
  <CommonChart 
    class="ecg-chart"
    ref="commonChartRef"
    :height="props.height"
    :fullOptions="{
      options: option
    }"
    :width="`${props.width}cm`"
    :loading="false"
    :id="`${props.deviceId}-ecg-chart`"
  />
</template>
<script setup lang="ts">
import CommonChart from '@/components/echarts/index.vue'
import { useLineChart } from '@/hooks/use-line-chart'
const props = defineProps({
  height: {
    type: String,
    default: '100px'
  },
  width: {
    type: Number,
    default: 10
  },
  showSplitLine: {
    type: Boolean,
    default: false
  },
  deviceId: {
    type: String,
    default: 'ZCXK001'
  },
  grid: {
    type: Object,
    default: () => {}
  }
}) as {
  height: string,
  width: number,
  showSplitLine: boolean,
  deviceId: string,
  grid: object
}
const option = {
  color:'rgb(10 210 96)',
  tooltip: {
    show: false
  },
  toolbox: {
    show: false,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    show: false,
    type: 'category',
    boundaryGap: false,
    inverse: false,
    axisLine: {
      onZero: false,
      color: '#666669',
      lineStyle: {
        type: 'solid',
        color: '#666669',//左边线的颜色
        width:'1'//坐标线的宽度
      }
    },
    name: '秒',
    axisLabel: {
      formatter: '{value} ',
      color: '#666669'
    }
  },
      
  yAxis: {
    show: props.showSplitLine,
    type: 'value',
    min: 0,
    max: 65535,
    splitLine: {
      show: props.showSplitLine,
      lineStyle: {
        color: 'rgb(63 63 68)',
        type: 'dotted'
      }
    },
    axisPointer: {
      snap: true
    }
  },
  grid: props.grid || {
    left: '0',right:'0', bottom:'0', height: '100%'
  },
  dataZoom: [{
    show: true,
    type: 'inside',
    zoomOnMouseWheel: false
  }, {
    show: false,
    type: 'inside',
    filterMode: 'none',
    zoomOnMouseWheel: false
  }],
  series: [{
    name: '豪秒',
    type: 'line',
    smooth: true,
    silent: true,
    symbol: 'none',
    data: [],
    connectNulls: false,
    emphasis: {
      disabled: true
    },
    lineStyle: {
      width: 1
    }
  }]
};

const { commonChartRef, setOption } = useLineChart({
  type: 'ecg',
  id: props.deviceId,
  totalCount: 250 * (props.width / 2.5),
  initNum: 32767.5,
  totalPreSecond: 250,
  onceUpdate: 25,
  timeOut: 100,
  emptyNum: 10
})
defineExpose({
  setOption
})
</script>
<style lang="less" scoped>
.ecg-chart::before {
  position: absolute;
  right: 15px;
  top: 20px;
  content: '1MV';
  color:rgb(10 210 96);
  width: 2px;
  height: 1cm;
  padding-left: 3px;
  border-left: 2px solid #0ad260;
}
</style>
